<?php
/*
 * Created on Mar 3, 2010
 *
 * To change the template for this generated file go to
 * Window - Preferences - PHPeclipse - PHP - Code Templates
 */
?>
<style type="text/css">
	.gallery.custom-state-active { background: #eee; }
	.gallery li { float: left; width: 120px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
	.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
	.gallery li a { float: right; }
	.gallery li a.ui-icon-zoomin { float: left; }
	.gallery li img { width: 100%; cursor: move; }

	.media-owner h4 { line-height: 16px; margin: 0 0 0.4em; }
	.media-owner h4 .ui-icon { float: left; }
	.media-owner .gallery h5 { display: none; }
</style>

<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
	$(function() {
		// there's the gallery and the trash
		var $gallery = $('#mediaList'), $trash = $('#mediaOwner'), $represent = $("#represent");

		$('ul',$trash).sortable();

		// let the gallery items be draggable
		$('li',$gallery).draggable({
			cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
			revert: 'invalid', // when not dropped, the item will revert back to its initial position
			containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
			helper: 'clone',
			cursor: 'move'
		});
		$('ul',$trash).draggable({
			connectToSortable: '#mediaOwner ul',
			helper: 'clone',
			revert: 'invalid'
		});
		// let the trash be droppable, accepting the gallery items
		$trash.droppable({
			accept: '#mediaList li',
			activeClass: 'ui-state-highlight',
			drop: function(ev, ui) {
				deleteImage(ui.draggable);
			}
		});

		// let the gallery be droppable as well, accepting items from the trash
		$gallery.droppable({
			accept: '#mediaOwner li',
			activeClass: 'custom-state-active',
			drop: function(ev, ui) {
				recycleImage(ui.draggable);
			}
		});

		// let add representation image, acceipting item from the trash
		$represent.droppable({
			accept: '#mediaOwner li',
			drop: function(ev, ui){
				var $mediaId = ui.draggable.find('input').val();
				var $srcImg = ui.draggable.find('img').attr("src");
				$represent.find('input').val($mediaId);
				$represent.find('img').attr("src", $srcImg);
			}
		});

		// image deletion function
		var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image" class="ui-icon ui-icon-refresh">Recycle image</a>';
		function deleteImage($item) {
			var $id = $item.find('input').val();
			var $flag = true;
			// Check id is exist;
			$("#mediaOwner").find("input").each(function(){
				if($id==$(this).val()){
					$flag = false;
				}
			});
			if($flag){
				$item.fadeOut(function() {
						var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);

					$item.find('a.ui-icon-plus').remove();
					$item.append(recycle_icon).appendTo($list).fadeIn(function() {
						$item.animate({ width: '96px' }).find('img').animate({ height: '64px' });
					});
				});
			}
			else{
				return $item.draggable('option', 'revert', true);
			}
		}

		// image recycle function
		var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Add this image" class="ui-icon ui-icon-plus">Add image</a>';
		function recycleImage($item) {
			$item.fadeOut(function() {
				$item.find('a.ui-icon-refresh').remove();
				$item.css('width','120px').append(trash_icon).find('img').css('height','80px').end().appendTo($gallery).fadeIn();
			});
		}

		// image preview function, demonstrating the ui.dialog used as a modal window
		function viewLargerImage($link) {
			var src = $link.attr('href');
			var title = $link.siblings('img').attr('alt');
			var $modal = $('img[src$="'+src+'"]');

			if ($modal.length) {
				$modal.dialog('open');
			} else {
				var img = $('<img alt="'+title+'" style="display:none;padding:8px;width:784px;"/>').attr('src',src).appendTo('body');
				setTimeout(function() {
					img.dialog({
							title: title,
							width: 800,
							modal: true
						});
				}, 1);
			}
		}

		// resolve the icons behavior with event delegation
		$('ul.gallery > li').click(function(ev) {
			var $item = $(this);
			var $target = $(ev.target);

			if ($target.is('a.ui-icon-plus')) {
				deleteImage($item);
			} else if ($target.is('a.ui-icon-zoomin')) {
				viewLargerImage($target);
			} else if ($target.is('a.ui-icon-refresh')) {
				recycleImage($item);
			}

			return false;
		});

		$('ul',$trash).disableSelection();

		$("#setForm").validate();
		$("#pagination a").click(function(){
			var link = $(this).attr('href');
			$("#Gallery").load(link);
			return false;
		});
	});
});
</script>
<h2>Gallery: Modify Set</h2>
<div class="content-inner">
	<div class="media-set-cont">
	<form action="<?=site_url(array('c' => 'cms_gallery', 'm' => 'edit_set', 'id' => $set['id']))?>" method="post" id="setForm">
		<table class="form-table" cellpadding="5" cellspacing="0" style="width: 100%;">
			<tbody>
				<tr>
					<th>Representation: </th>
			    	<td>
						<div id="represent" class="set-case">
							<input type="hidden" name="item_represent" value="<?=$set['represent']?>"/>
							<img src="<?=site_url(array("c" => "cms_gallery", "m" => "thumbnail", "image_id" => $set['represent']));?>" width="<?=$image_toolkit['thumb_width']?>" height="<?=$image_toolkit['thumb_height']?>"/>
						</div>
			    	</td>
			    	<td rowspan="3" width="80%">
			    		<p>Drag stuff here to add it to the set</p>
			    		<div id="mediaOwner" class="media-owner">
			    			<?php if(!empty($media_chosen)):?>
							<ul class="gallery ui-helper-reset ui-helper-clearfix">
								<?php foreach($media_chosen as $item):?>
								<li class="ui-widget-content ui-corner-tr ui-draggable" style="display: list-item; width: 96px;">
									<input type="hidden" value="<?=$item['id']?>" name="item_media_ids[]">
									<h5 class="ui-widget-header"><?=$item['title']?></h5>
									<img alt="" src="<?=$media_thumb['user_media_url'].$item['rawname'].$media_thumb['thumb_marker'].$item["fileext"]?>" style="height: 64px; display: inline;">
									<a class="ui-icon ui-icon-zoomin" title="View larger image" href="">View larger</a>
									<a class="ui-icon ui-icon-refresh" title="Recycle this image" href="link/to/recycle/script/when/we/have/js/off">Recycle image</a>
								</li>
								<?php endforeach;?>
							</ul>
							<?php endif;?>
			    		</div>
			    	</td>
			    </tr>
				<tr>
					<th>Title: </th>
			    	<td><input type="text" name="item_title" class="input-text input-small required" value="<?=$set['title']?>"/></td>
			    </tr>
				<tr>
					<th>Description: </th>
			    	<td>
						<textarea name="item_description" rows="7" cols="37" class="input-textarea-small" style="height: 220px"><?=$set['description']?></textarea>
			    	</td>
			    </tr>
			    <tr>
					<th></th>
					<td>
						<input type="button" class="ins" onClick="javascript:history.back();" value="Cancel" />
						<input name="Submit" type="submit" class="ins" value="Save" />
					</td>
				</tr>
			</tbody>
		</table>
	</form>
	<div id="Gallery">
		<div id="pagination"><?=$this->pagination->create_links()?></div>
		<ul id="mediaList" class="gallery media-list ui-helper-reset ui-helper-clearfix">
			<?php if(!empty($img_list)):$i=0?>
			<?php foreach($img_list as $item):?>
			<li class="ui-widget-content ui-corner-tr">
				<input name="item_media_ids[]" type="hidden" value="<?=$item['id']?>"/>
				<h5 class="ui-widget-header"><?=$item['title']?></h5>
				<img src="<?=$media_thumb['user_media_url'].$item['rawname'].$media_thumb['thumb_marker'].$item["fileext"]?>" alt="<?=$item['title']?>" width="<?=$image_toolkit['thumb_width']?>" height="<?=$image_toolkit['thumb_height']?>"/>
				<a href="<?=$media_thumb['user_media_url'].$item['filename']?>" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
				<a href="link/to/trash/script/when/we/have/js/off" title="Add this image" class="ui-icon ui-icon-plus">Add image</a>
			</li>
			<?php $i++;endforeach;?>
			<?php endif;?>
		</ul>
	<div class="clearfix"></div>
	</div>
	</div>
</div>